<!doctype html>
<html>
<head>
	<meta charset="utf-8">
    <title>hello,angular2</title>
    <!--模块加载器-->
    <script src="../Scripts/plugins/lib/system@0.16.11.js"></script>
    <!--Angular2模块库-->
    <script src="../Scripts/plugins/lib/angular2.dev.js"></script>
    <!--引入Angular2路由模块库-->
    <script type="text/javascript" src="../Scripts/plugins/lib/router.dev.js"></script>
    <script type="text/javascript" src="../Scripts/plugins/lib/system.config.js"></script>
	<script>
        //设置模块加载规则
        //System.baseURL = document.baseURI;
        System.config({
            map:{traceur:"../Scripts/plugins/lib/traceur"},
            traceurOptions: {annotations: true}
        });
    </script>

    <link rel="stylesheet" href="../Content/base.css" />
    <link rel="stylesheet" href="../Content/Site.css" />
</head>
<body>
    <admin-header></admin-header>
    <admin-content></admin-content>
    <admin-main></admin-main>

    <script type="module">
        import {Inject,Component,View,bootstrap,NgFor} from "angular2/angular2";
        import {LocationStrategy,RouteRegistry,RouteConfig,RouterOutlet,RouterLink,Router,routerInjectables} from "angular2/router";

        @Component({selector : "admin-header"})
        @View({
            templateUrl : "../Templates/admin/header-tpl.html"
        }) 
        class AdminHeader{}
        bootstrap(AdminHeader);

        @Component({selector : "admin-content"})
        @View({
            directives:[RouterOutlet,RouterLink,NgFor],
            templateUrl : "../Templates/admin/content-tpl.html"
        })
        @RouteConfig([
            {path:"/test", component:ContentTest,as:"test",useAsDefault: true},
            {path:"/table", component:AdminTable,as:"table"}
        ])
        class AdminContent{
            //注入路由注册表对象:RouteRegistry
            constructor(@Inject(RouteRegistry) rr,@Inject(LocationStrategy) ls){
                ls.pushState = function(){};
                this.rr = rr;
            }
        }

        @Component({selector:"content-test"})
        @View({template : `<h1>ContentTest</h1>`})
        class ContentTest{}
        
        @Component({selector:"table-test"})
        @View({
            directives:[NgFor],
            templateUrl : "../Templates/admin/table-tpl.html"
        })
        class AdminTable{
            constructor(){
                this.testData = [
                    {a:11,b:12,c:13},
                    {a:21,b:22,c:23},
                    {a:31,b:32,c:33}
                ]
            }
        }

        bootstrap(AdminContent,[routerInjectables]);

        /*@Component({selector : "admin-main"})
        @View({
            templateUrl : "Templates/admin/main-tpl.html"
        })
        class AdminMain{}
        bootstrap(AdminMain);*/

        //test es6
        //import * as test from "Scripts/test";
        //console.log(test.area(1));
    </script>
</body>
</html>